<template>
	<view class="pages-equity-message-send">
		<u-cell-group :customStyle="{ 'margin-bottom': '20rpx', 'background-color': '#ffffff' }" :border="false">
			<u-cell size="large" isLink rightIcon="/static/images/icon-arrow-right.png">
				<template #title>
					<view class="cell-title">
						<text>所在区县</text>
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						<text>雨花区</text>
					</view>
				</template>
			</u-cell>
			<u-cell size="large" isLink rightIcon="/static/images/icon-arrow-right.png">
				<template #title>
					<view class="cell-title">
						<text>学校名称</text>
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						<text>湖南女子大学</text>
					</view>
				</template>
			</u-cell>
			<u-cell size="large" isLink rightIcon="/static/images/icon-arrow-right.png">
				<template #title>
					<view class="cell-title">
						<text>姓名</text>
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						<text>张三</text>
					</view>
				</template>
			</u-cell>
			<u-cell size="large" isLink rightIcon="/static/images/icon-arrow-right.png" :border="false">
				<template #title>
					<view class="cell-title">
						<text>手机号</text>
					</view>
				</template>
				<template #value>
					<view class="cell-value">
						<text></text>
					</view>
				</template>
			</u-cell>
		</u-cell-group>
		<u-cell-group :customStyle="{ 'margin-bottom': '20rpx', 'background-color': '#ffffff' }" :border="false">
			<u-cell value="" :border="false">
				<template #title>
					<view class="cell-title block">
						<text>留言内容</text>
					</view>
				</template>
				<template #label>
					<u--textarea v-model="form.content" placeholder="请输入留言内容" height="220"></u--textarea>
				</template>
			</u-cell>
		</u-cell-group>
		<u-cell-group :customStyle="{ 'background-color': '#ffffff' }" :border="false">
			<u-cell value="" :border="false">
				<template #title>
					<view class="cell-title">
						<text>上传图片</text>
						<text class="cell-title--sub">（选填，最多上传5张）</text>
					</view>
				</template>
				<template #label>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="images" multiple
						:maxCount="5" :previewFullImage="true" uploadIcon="plus" :width="202" :height="138"></u-upload>
				</template>
			</u-cell>
		</u-cell-group>

		<view class="btn-box">
			<view class="box entry-my-feedback-list">
				<u-text v-if="form.message_type == 'feedback'" color="#2DCC75" text="我的咨询" size="28" bold block
					@click="handleToPage('/pages/equity-sub/feedback/list', { equity_config_id: equity_config_id, message_type: 'feedback' })"></u-text>
			</view>
			<u-button text="提交留言" shape="circle" color="#2DCC75" @click=""></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				equity_config_id: 0,
				fileList: [],
				form: {
					message_type: 'notice',
					content: ''
				}
			}
		},
		onLoad(options) {
			const messageType = String(options.message_type || '')
			console.log('messageType:', messageType)
			if (messageType && messageType.length) {
				this.form.message_type = messageType
			}
			this.equity_config_id = options.equity_config_id || 0
		},
		methods: {
			handleToPage(path, params = {}) {
				uni.$u.route({
					url: path,
					params: params
				})
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.fileList[fileListLen];
					this.fileList.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages-equity-message-send {
		background-color: #f8f8f8;

		.cell-title {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 67rpx;

			&.block {
				margin-bottom: 20rpx;
			}

			&--sub {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.cell-value {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 67rpx;
		}

		.btn-box {
			margin-top: 110rpx;
			padding: 0 65rpx;
			padding-bottom: 20rpx;
			.entry-my-feedback-list {
				display: flex;
				justify-content: center;
				::v-deep .u-text {
					flex: unset;
					width: fit-content;
				}
			}
		}
	}
</style>
